<template>
  <div class="panel panel-default">
    <div class="panel-heading">
      <TitleTip :title=titleDetail position="bottom">
        <h3 class="panel-title">{{ title }}</h3>
      </TitleTip>
    </div>
    <div class="panel-body">
      <p class="panel-body-log" v-for="item in this.$store.state.user.userLog" :key="item"><span class="btn btn-xs fst-italic">{{ item.timeLine }}</span>
      <span class="text-secondary fst-italic" v-html="item.content"></span>
      </p>
    </div>
  </div>
</template>

<script>
import TitleTip from './TitleTip.vue'

export default {
  name: 'UserLog',
  data: function () {
    return {
      title: "个人经历",
      titleDetail:"人生主要经历"
    }
  },
  components: {
    TitleTip
  },
  props: {
    userLog: {}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.panel-body-log{
  margin-bottom: 0;
  font-size: 12px;
  /*color: transparent 0.2s;*/
}
.log-content{
  color: #6C757D;
}
.btn-xs{
  /*width: 100px;*/
  text-align: right;
  --bs-btn-padding-y: 0rem;
  --bs-btn-padding-x: 0.3rem;
}
</style>
